<template>
	<view>
		<MyNavbar title="我的" :autoBack="false"/>
		
		<!-- 用户信息区域 -->
		<div 
			class="flex flex-center"
			style="min-height: 200rpx;background-color: #007AFF;padding: 24rpx;color: #FFFFFF;"
		>
			<!-- 已登录 -->
			<div v-if="userInfo" class="flex flex-center" @click="toUserInfo()">
				<u-avatar :src="userInfo.avatar"/>
				<text style="margin-left: 12rpx;">{{userInfo.nickname}}</text>
			</div>
			
			<!-- 未登录 -->
			<div v-else class="flex flex-center" @click="toLogin()">
				<u-avatar icon="account-fill" src=""/>
				<text style="margin-left: 12rpx;">立即登录</text>
			</div>
		</div>
		
		
		<div style="background-color: #FFFFFF;margin: 24rpx 24rpx 0 24rpx;">
			<u-cell title="我的订单" >
				<u-grid
					slot="label"
					:border="false"
					col="4"
				>
					<u-grid-item
						@click="toPage('/pages/orderList/orderList')"
					>
						<u-icon
							:customStyle="{paddingTop:20+'rpx'}"
							name="red-packet"
							:size="50"
						></u-icon>
						<text class="grid-text">待付款</text>
						
					</u-grid-item>
					<u-grid-item
						@click="toPage('/pages/orderList/orderList')"
					>
						<u-icon
							:customStyle="{paddingTop:20+'rpx'}"
							name="order"
							:size="50"
						></u-icon>
						<text class="grid-text">待消费</text>
					</u-grid-item>
					<u-grid-item
						@click="toPage('/pages/orderList/orderList')"
					>
						<u-icon
							:customStyle="{paddingTop:20+'rpx'}"
							name="order"
							:size="50"
						></u-icon>
						<text class="grid-text">待结算</text>
					</u-grid-item>
					<u-grid-item
						@click="toPage('/pages/orderList/orderList')"
					>
						<u-icon
							:customStyle="{paddingTop:20+'rpx'}"
							name="order"
							:size="50"
						></u-icon>
						<text class="grid-text">全部订单</text>
						<u-badge  max="99" value="999" absolute :offset="[10,0]"></u-badge>
					</u-grid-item>
				</u-grid>
			</u-cell>
		</div>
		
		<div style="background-color: #FFFFFF; margin: 24rpx;">
			<u-cell-group :border="false">
				<u-cell v-if="userInfo" title="个人中心" :isLink="true" @click="toUserInfo()"></u-cell>
				<u-cell title="使用帮助" :isLink="true" ></u-cell>
				
				<u-cell title="设置" :isLink="true" ></u-cell>
				<u-cell title="关于我们" :isLink="true" @click="toPage('/pages/about/about')"></u-cell>
				
				<u-cell v-if="showAdmin" title="商家管理后台" :isLink="true" @click="toAdmin()"></u-cell>
			</u-cell-group>
		</div>
		
		<div style="background-color: #FFFFFF; margin: 24rpx;">
			<u-cell-group :border="false">
				<u-cell v-if="userInfo" title="退出登录" :isLink="true" @click="onClickLogout()"></u-cell>
			</u-cell-group>
		</div>
		
		
		<PageFooter />
		<!-- 底部tabbar -->
		<MyTabbar active="my"/>
	</view>
</template>

<script>
	// 底部tabbar
	import MyTabbar from '@/components/layout/MyTabbar.vue';
	import {mapState, mapActions} from 'vuex';
	
	export default {
		components: {
			MyTabbar
		},
		data() {
			return {
				
			}
		},
		computed: {
			...mapState('user', {
				userInfo: 'userInfo',
			}),
			// 显示后台管理
			showAdmin(){
				let {userInfo} = this;
				return userInfo;
			},
		},
		methods: {
			...mapActions('user', {
				logout: 'logout',
			}),
			// 前往登录
			toLogin(){
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			// 打开用户信息
			toUserInfo(){
				uni.navigateTo({
					url: '/pages/my/userInfo/userInfo'
				})
			},
			// 打开商家管理后台
			toAdmin(){
				uni.navigateTo({
					url: '/pagesAdmin/index/index'
				})
			},
			// 打开页面
			toPage(url){
				uni.navigateTo({
					url: url
				})
			},
			// 点击退出登录
			onClickLogout(){
				this.logout().then(()=>{
					uni.navigateTo({
						url: '/pages/login/login'
					})
				});;
			},
		}
	}
</script>

<style scoped>

</style>
